<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8" />
    <title>问答首页</title>
    <link rel="stylesheet" href="css/yueke.css">
    <link rel="stylesheet" href="ubox/ubox.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="underscore/underscore-min.js"></script>
    <script type="text/javascript" src="js/list_more.js"></script>
    <script type="text/javascript" src="js/fixation.js"></script>
    <script type="text/javascript" src="ubox/ubox.js"></script>
    <script type="text/javascript" src="js/md5.js"></script>
</head>
<body class="background_grey">
    <div class="header">
        <div class="header_in">
            <div class="header_logo">
                <h1></h1>
                <img src="images/index_log.jpg" />
            </div>
            <div class="header_nav">
                <ul>
                    <li><a href="model_news_list.html">前沿资讯</a></li>
                    <li><a href="model_problem_list.html">互动问答</a></li>
                    <li><a href="model_personage_center.html">帮助中心</a></li>
                </ul>
            </div>
            <div class="header_info">
                <div class="header_info_find"><a href="#">寻找合作伙伴</a></div>
                <div class="header_register">
                    <a href="#">登录</a>|
                    <a href="#">注册</a>
                </div>
                <div class="header_become">
                    <a href="#">成为我们的专家</a>
                </div>
            </div>
            <div class="clear_both"></div>
        </div>
    </div>
    <div class="index_banner">
        <ul class="index_banner_in" id="index_banner">
            <li class="index_banner_item">
                <div class="index_banner_item_in">
                    <img src="images/index_banner.jpg" alt="" />
                </div>
            </li>
        </ul>
        <ol class="index_banner_circle" id="index_circle">
            <li class="active"></li>
        </ol>
        <div class="index_banner_prev" id="index_prev"></div>
        <div class="index_banner_next" id="index_next"></div>
    </div>
    <div class="problem_list">
        <div class="problem_list_left">
            <div class="problem_list_left_list">
                <div class="problem_list_left_list_title">
                    <div class="problem_list_left_list_title_title">
                        <span>互动问答</span>
                        <input type="text" />
                    </div>
                    <div class="problem_list_left_list_title_tag">
                        <ol>
                            <li class="active">
                                热门问答
                            </li>
                            <li>
                                热门问答
                            </li>
                            <li>
                                热门问答
                            </li>
                            <li>
                                热门问答
                            </li>
                            <li>
                                热门问答
                            </li>
                            <li>
                                热门问答
                            </li>
                        </ol>
                        <span>更多分类</span>
                    </div>
                </div>
                <ul id="problem_list">
                    <li class="problem_list_left_item">
                        <div class="problem_list_left_item_problem">
                            <div class="problem_detail_left_title">
                                <div class="problem_detail_left_title_keyword">
                                    <div class="problem_detail_left_title_person"><img src="images/problem_list_img1.jpg" alt="" /></div>
                                    <div class="problem_detail_left_title_in">
                                        <h2>用户运营，产品运营，社区运营，活动运营到底是个什么关系？</h2>
                                        <p><span>朱善大</span><i>（<span>中医院院士</span>）</i> 回答了问题</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="problem_list_left_item_answer">
                            <div class="problem_detail_left_item_detail">
                                运营的核心目的是为了产品能够活得更好更持久，尽可能放大产品的覆盖用户量和延长产品的生命周期。而上述用户运营、活动运营、产品运营等都是看待运营的一种视角和去梳理工作的方式。它们最主要的区别在于：考虑问题的中心点和侧重点有所不同。就目前而言，互联网行业内相对比较有一致共识的4大运营职能划分，是内容运营、用户运营、运营的核心目的是为了产品能够活得更好更持久，尽可能放大产品的覆盖用户量和延长产品的生命周期。而上述用户运营、活动运营、产品运营等都是看待运营的一种视角和去梳理工作的方式。它们最主要的区运营的最主要的区别在于：考虑问题的中心点和侧重点有所不同。就目前而言，互联网行业内相对比较有一致共识的4大运营职能划分，是内容运营、用户运营、运营的核心目的是为了产品能够活得更好更持久，尽可能放大产品的覆盖用户量和延长产品的生命周期。而上述用户运营、活动运营、产品运营等都是看待运营的一种视角和去梳理工作的方式。它们最主要的区运营的
                            </div>
                            <div class="problem_detail_left_item_btn">
                                <span class="more">显示全部</span>
                            </div>
                            <div class="problem_detail_left_item_info">
                                <span class="question" ontab="1"><i>+</i>关注问题</span>   
                                <span class="number">13,240个关注</span>
                                <span class="like" ontab="1"><i>527</i>个喜欢</span>
                                <span class="answer" ontab="1"><a href=""><i>190</i>条评论</a></span> 
                                <span class="time">20分钟前</span>
                                <div class="clear_both"></div>
                            </div>
                        </div>
                        <!-- <div class="problem_detail_left_item_comment"></div> -->
                    </li
                </ul>
            </div>
            <div class="problem_load_more_outer">
                <div class="problem_load_more" id="moreBt">
                    加载更多
                </div>
            </div>
        </div>
        <div class="problem_detail_right" id="fixed_right">
            <div class="problem_detail_right_top">
                <div class="problem_detail_right_btn" id="put_questions">我要提问</div>
                <div class="problem_detail_right_btn blue">回答问题</div>
            </div>
            <div class="problem_detail_right_bottom">
                <ul class="problem_detail_right_bottom_list">
                    <li class="item1"><a href="#">我的提问</a></li>
                    <li class="item2"><a href="#">我的回答</a></li>
                    <li class="item3"><a href="#">我关注的问题</a></li>
                    <li class="item4"><a href="#">我喜欢的回答</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="index_link">
        <div class="index_link_in"></div>
    </div>
    <div class="index_footer">
        <div class="index_footer_link">
            <a href="">新闻公告</a>|
            <a href="">关于我们</a>|
            <a href="">联系我们</a>|
            <a href="">用户协议</a>
        </div>
        <p class="index_footer_copy">Copyright©2016 yk-zb.com 粤科众包 版权所有 粤ICP备16027165号-1</p>
    </div>
    <div class="shadow">
        <div class="problem_shadow">
            <div class="problem_shadow_title">
                我要提问<span>X</span>
            </div>
            <div class="problem_shadow_main">
                <input type="text" placeholder="写下你的问题" class="problem_shadow_ipt"/>
                <p>问题描述（选填）：</p>
                <textarea name="" id="" cols="30" rows="10" placeholder="请填写问题的详细描述···" class="problem_shadow_textarea"></textarea>
                <p>选择标签：</p>
                <select name="" id="" class="problem_shadow_select">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
                <div class="problem_shadow_btn">
                    <span class="publish" id="btn_publish">发布</span>
                    <span class="abolish" id="btn_abolish">取消</span>
                </div>
            </div>
        </div>
    </div>
    <script id="problemItem" type="text/template">
        <li class="problem_list_left_item" questions_id="<#= questionsId #>" pub_date="<#= pubDate #>" user_id="<#= userBase.userId #>">
            <div class="problem_list_left_item_problem">
                <div class="problem_detail_left_title">
                    <div class="problem_detail_left_title_keyword">
                        <div class="problem_detail_left_title_person"><img src="<#= userBase.headImgUrl #>" alt="" /></div>
                        <div class="problem_detail_left_title_in">
                            <h2><#= title #></h2>
                            <p><span><#= userBase.nickname #></span><i>（<span>中医院院士</span>）</i> 回答了问题</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="problem_list_left_item_answer">
                <div class="problem_detail_left_item_detail">
                    <#= firstAnswerContent #>
                </div>
                <div class="problem_detail_left_item_btn">
                    <span class="more" ontab="1">显示全部</span>
                </div>
                <div class="problem_detail_left_item_info">
                    <span class="like" ontab="1"><i><#= answerNum #></i>个喜欢</span>
                    <span class="answer" ontab="1"><a href=""><i><#= answerNum #></i>条评论</a></span>  
                    <span class="time"><#= pubDate #></span>
                    <div class="clear_both"></div>
                </div>
            </div>
        </li>
    </script>
</body>
</html>
<script type="text/javascript">
    $(function() {
        var arrDetail = [];   //用来存问题详情
        (function fnPaging(){
            encryptMd5.data = {
                lastId : 0,
                pageSize : 5 
            }
            sMd5 = encryptMd5.fnData();
            console.log(sMd5);
            var pages = 5 ;    //分页总页数
            var page = 1;
            var id = 0;
            /*加载数据*/
            function loadmore() {
                var rnd = parseInt(Math.random()*1000+1);
                          //alert("currentPage=" + page + ",totalePage=" + pages);
                var url=" " + "/" + page;//页面
                /*var json = {
                    data_id : id ,
                    time : '2016-05-23 21:09',
                    url_img : 'images/problem_list_img2.jpg',
                    title : '云服务为什么需要配备1对1队告诉你',
                    detail : '网易云信全新推出T服务，独创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1技术顾问实时响应解决每个技术难题，让你不再惧怕上云',
                    person1 : '但是对方是否',
                    person2 : '第三方多三' ,
                    num1 : '1235',
                    num2 : '12352222',
                    num3 : '12356'
                }
               if(json.detail.length >= 200){
                    arrDetail.push({
                        id : id,
                        detail : json.detail
                    });
                    console.log(arrDetail);
                    json.detail = json.detail.substring(0,200) + '······';
                    var t = _.template($("#problemItem").text());
                    var htmlTxt = t(json);
                    $('#problem_list').append(htmlTxt);
                    $('.more').eq($('.problem_list_left_item').length-1).show();
                }else{
                    var t = _.template($("#problemItem").text());
                    var htmlTxt = t(json);
                    $('#problem_list').append(htmlTxt);
                }*/
                // console.log(json)
            // console.log(t,htmlTxt)
                $.ajax({
                        type: "get",
                        url: 'http://192.168.100.219:6071/json/questionsList',
                        data : sMd5 ,
                        rnd: rnd,
                        dataType: "json",
                        success: function(result) {
                                if(result.code == 0){
                                    console.log(result);
                                      var list = result.data;
                                      for(var i = 0; i < list.length; i++){
                                            var order_item = list[i];
                                            order_item.pubDate = getTimeLatser(order_item.pubDate);
                                            if('firstAnswerContent' in order_item){
                                                console.log("有")
                                                if(order_item.firstAnswerContent.length >= 50){
                                                    arrDetail.push({
                                                        id : order_item.questionsId,
                                                        detail : order_item.firstAnswerContent
                                                    });
                                                    console.log(arrDetail);
                                                    order_item.firstAnswerContent = order_item.firstAnswerContent.substring(0,50) + '······';
                                                    var t = _.template($("#problemItem").text());
                                                    var htmlTxt = t(order_item);
                                                    $('#problem_list').append(htmlTxt);
                                                    $('.more').eq($('.problem_list_left_item').length-1).show();
                                                }else{
                                                    var t = _.template($("#problemItem").text());
                                                    var htmlTxt = t(order_item);
                                                    $('#problem_list').append(htmlTxt);
                                                }
                                            }else{
                                                order_item.firstAnswerContent = '';
                                                var t = _.template($("#problemItem").text());
                                                var htmlTxt = t(order_item);
                                                $('#problem_list').append(htmlTxt);
                                            }
                                            
                                      }
                                      
                                      //每次都返回总页数
                                      if (page >= pages){
                                              $("#moreBt").html('没有更多');
                                      }
                                }else{
                                    UBox.show('加载失败', -1);
                                }
                        }
                  });
                };
                loadmore();
                /*加载更多*/
                $("#moreBt").click(function(event) {
                    if(page >= pages){
                        $("#moreBt").html('没有更多');
                        return false;
                    }else{
                         page++;
                         id++;
                    }
                    loadmore()
                });
        })();
        //banner 轮播
        (function fnBanner(){
            var iWinWidth = $(window).width();
            var iNum = $('#index_banner li').length;
            var iCirWidth = $('#index_circle li').width()*iNum + 22*(iNum - 1);
            var indexOld = 0;
            $('#index_banner li').css('width',iWinWidth+'px');
            $('#index_circle').css({"width":iCirWidth + "px","margin-left":-iCirWidth/2 + "px"});
            $('#index_banner').css({"width":iWinWidth * iNum + "px"});
            if(iNum <= 1){
                $('#index_circle').hide();
                $('#index_next').hide();
                $('#index_prev').hide();
            }
            $('#index_next').click(function(event) {
                if(indexOld >= 2){
                    return;
                }
                indexOld++;
                console.log(indexOld);
                $('#index_circle li').removeClass('active');
                $('#index_circle li').eq(indexOld).addClass('active');
                $('#index_banner').animate({"left":-iWinWidth * indexOld + "px"}, 200);
            });
            $('#index_prev').click(function(event) {
                if(indexOld == 0){
                    return;
                }
                indexOld--;
                console.log(indexOld);
                $('#index_circle li').removeClass('active');
                $('#index_circle li').eq(indexOld).addClass('active');
                $('#index_banner').animate({"left":-iWinWidth * indexOld + "px"}, 200);
            });
            $('#index_circle li').click(function(event) {
                indexOld = $('#index_circle li').index(this);
                $('#index_circle li').removeClass('active');
                $('#index_circle li').eq(indexOld).addClass('active');
                $('#index_banner').animate({"left":-iWinWidth * indexOld + "px"}, 200);
            });
        })();
        /* 点击更多 */
        $("#problem_list ").on("click",'.more', function(e) {
            var index = $('.more').index(this);
            console.log(index)
            var oParent = $(this).parent().siblings('.problem_detail_left_item_detail');
            var dataId = $('.problem_list_left_item').eq(index).attr('questions_id');
            if($(this).attr('ontab')=='1'){
                console.log(dataId)
                $('.problem_detail_left_item_btn_time').show();
                $(this).html('收起');
                for(var i = 0; i < arrDetail.length ; i++){
                    if(arrDetail[i].id == dataId){
                        oParent.html(arrDetail[i].detail);
                    }
                }
                $(this).attr('ontab','0');
            }else{
                var str = oParent.html().substring(0,50);
                oParent.html(str+'······');
                $('.problem_detail_left_item_btn_time').hide();
                $(this).html('显示全部');
                $(this).attr('ontab','1');
            }
        });
        /*我要提问*/
        $('#put_questions').click(function(event) {
            $('.shadow').fadeIn();
            $('.problem_shadow').fadeIn();
            return false;
        });
        $('.problem_shadow_title span').click(function(event) {
            $('.shadow').fadeOut();
            $('.problem_shadow').fadeOut();
        });
        $('#btn_publish').click(function(event) {
            var ipt = $('.problem_shadow_ipt').val();
            var txta = $('.problem_shadow_textarea').val();
            var select = $('.problem_shadow_select').val();
            if(ipt == '' || txta == '' || select == ''){
                return false;
            }
            encryptMd5.data = {
                describe : txta ,
                pid : 60,
                title : ipt,
                token : '6311aa481a362c65def777fd133756d8'
            }
            console.log(encryptMd5.fnMd5());
            sMd5 = encryptMd5.fnData()
            console.log(ipt,txta,select);
            $.ajax({
                  type: "POST",
                  url: 'http://192.168.100.219:6071/json/pubQuestions',   //提交地址     
                  data : sMd5,    
                  dataType: "json",
                  success: function(data){
                        console.log(data);
                        },
                  error: function(data){
                                
                        }
            });
        });
        $('#btn_abolish').click(function(event) {
            $('.shadow').fadeOut(200,function(){
                $('.problem_shadow_ipt').val('');
                $('.problem_shadow_textarea').val('');
                $('.problem_shadow_select').val('');
            });
        });
        $("#problem_list ").on("click",'.question', function(e) {
            var that = this;
            if($(this).attr('ontab')=='1'){
                /*$.ajax({
                        type: "POST",
                        url: url,
                        rnd: rnd,
                        dataType: "json",
                        success: function(result) {
                                if(result.code == 1){
                                    $(that).html('取消关注');
                                    $(this).attr('ontab','0');
                                }else{
                                          UBox.show('加载失败', -1);
                                }
                        }
                });*/
                $(this).html('取消关注');
                $(this).attr('ontab','0');
            }else{
                /*$.ajax({
                        type: "POST",
                        url: url,
                        rnd: rnd,
                        dataType: "json",
                        success: function(result) {
                                if(result.code == 1){
                                    $(that).html('<i>+</i>关注问题')
                                    $(this).attr('ontab','1');
                                }else{
                                          UBox.show('加载失败', -1);
                                }
                        }
                });*/
                $(this).html('<i>+</i>关注问题');
                $(this).attr('ontab','1');
            }
        });
        $("#problem_list ").on("click",'.like', function(e) {
            var that = this;
            var value = parseInt($(this).children('i').html());
            if($(this).attr('ontab')=='1'){
                /*$.ajax({
                        type: "POST",
                        url: url,
                        rnd: rnd,
                        dataType: "json",
                        success: function(result) {
                                if(result.code == 1){
                                    $(that).addClass('active');
                                    $(this).attr('ontab','0');
                                }else{
                                          UBox.show('加载失败', -1);
                                }
                        }
                });*/
                $(this).children('i').html(value+1);
                $(this).addClass('active');
                $(this).attr('ontab','0');
            }else{
                /*$.ajax({
                        type: "POST",
                        url: url,
                        rnd: rnd,
                        dataType: "json",
                        success: function(result) {
                                if(result.code == 1){
                                    $(that).removeClass('active');
                                    $(this).attr('ontab','1');
                                }else{
                                          UBox.show('加载失败', -1);
                                }
                        }
                });*/
                $(this).children('i').html(value-1);
                $(this).removeClass('active');
                $(this).attr('ontab','1');
            }
        });
        /*评论不做，做跳转*/
        /*$("#problem_list ").on("click",'.answer', function(e) {
            var that = this;
            var obj = $(this).parent().parent().siblings('.problem_detail_left_item_comment');
            var arr = ['1','2','3','4','5'];
            var str = '';
            if($(this).attr('ontab')=='1'){
                $.ajax({
                        type: "POST",
                        url: url,
                        rnd: rnd,
                        dataType: "json",
                        success: function(result) {
                                if(result.code == 1){
                                    for(var i = 0; i<result.data.length; i++){
                                        var order_item = result.data[i];
                                        console.log(order_item);
                                        var t = _.template($("#problemItem").text());
                                        var htmlTxt = t(order_item);
                                        obj.append(htmlTxt);
                                        obj.slideDown();
                                    }
                                }else{
                                          UBox.show('加载失败', -1);
                                }
                        }
                });
                for(var i=0; i<arr.length; i++){
                    str +='<div>'+arr[i]+'</div>';
                }
                obj.append(str);
                obj.slideDown();
                $(this).attr('ontab','0');
            }else{
                $.ajax({
                        type: "POST",
                        url: url,
                        rnd: rnd,
                        dataType: "json",
                        success: function(result) {
                                if(result.code == 1){
                                obj.slideUp(200,function(){
                                    obj.empty();
                                });    
                                }else{
                                          UBox.show('加载失败', -1);
                                }
                        }
                });
                obj.slideUp(200,function(){
                    obj.empty();
                });
                
                $(this).attr('ontab','1');
            }
        });*/
        /*拼装*/
        /*(function fnAssembly(){
            function fnMore(){
                var arrStr = [];
                $('.problem_detail_left_item_detail').each(function(index, el) {
                    var strOld = $(this).html();
                    var strNow = strOld ;
                    arrStr.push(strOld);
                    console.log(arrStr);
                    if(strOld.length >= 300){
                        strNow = strOld.substring(0,300) + '······';
                        $('.more').eq(index).show();
                    }
                    $(this).html(strNow);
                });
                $('.more').click(function(event) {
                    var index = $('.more').index(this);
                    var oParent = $(this).parent().siblings('.problem_detail_left_item_detail');
                    oParent.html(arrStr[index]);
                    $(this).hide();
                });
            }
            var json = {
                time : '2016-05-23 21:09',
                url_img : 'images/problem_list_img2.jpg',
                title : '云服务为什么需要配备1对1队告诉你',
                detail : '网易云信全新推出T服务，独创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1技术顾问实时响应解决每个技术难题，让你不再惧怕上云',
                person1 : '但是对方是否',
                person2 : '第三方多三' ,
                num1 : '1235dsfs',
                num2 : '12352222',
                num3 : '12356'
            }
            console.log(json)
            var t = _.template($("#problemItem").text());
            var htmlTxt = t(json);
            console.log(t,htmlTxt)
            $('#problem_list').append(htmlTxt);
            fnMore();
        })();*/
    });
</script>